<template>
    <!-- 各个天干命主详解 -->
    <div class="text-container">
        <div class="item-row" v-for="(item, index) in data" :key="index">
            <div class="item-title" v-if="item.title">{{ item.title }}：</div>
            <div class="item-content">
                <span>{{ item.desc }}</span>
                <span @click="jumpUrl(item.moreLink)" class="more-text">(相关木火文章)</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const data = [
    {
        desc: '甲木：上进，积极，个性耿直，心地仁慈，是天生的领导人物；但有时缺乏敏捷的应变能力。',
        moreLink: 'https://mp.weixin.qq.com/s/TbATFqcg_x41ir0444WhBg',
    },
    {
        desc: '乙木：感觉细腻，有审美力；外表谦虚，内心占有欲强，善随机应变，适应环境能力强。多艺术家。',
        moreLink: 'https://mp.weixin.qq.com/s/JdBHVDhV5Y3wIYmli_6OmA',
    },
    {
        desc: '丙火：活泼，豪放，急躁，不拘小节，乐于服务，心地光明；有时缺乏耐性与坚实的毅力。多宗教家、科学家。',
        moreLink: 'https://mp.weixin.qq.com/s/mW1O5Rjiaj436u_o5ZsJ9g',
    },
    {
        desc: '丁火：温和，敏锐，思想细腻；能牺牲，富同情心；为人守礼而多疑，有心机。多烈士、悲剧人物。',
        moreLink: 'https://mp.weixin.qq.com/s/cW_WI_4j8nvVkwyhMTvQew',
    },
    {
        desc: '戊土：沉稳，厚重，重名誉，信实无欺；为人憨厚呆板，生活方式较为枯燥乏味。',
        moreLink: 'https://mp.weixin.qq.com/s/X_879KLnHm5BWByWhabwAw',
    },
    {
        desc: '已土：细心，多疑，常具双重性格；多才多艺，能伸能屈，重视内涵；做事精明而多变化。多政客。',
        moreLink: 'https://mp.weixin.qq.com/s/TMbOqG-5yyjUFTvuMaEaGQ',
    },
    {
        desc: '庚金：干练，强硬；粗犷豪爽，具侠义心；个性好胜，爱出风头。多政治家、实业家。',
        moreLink: 'https://mp.weixin.qq.com/s/ASfxrFdW9Yrq3Q_GQsIfOA',
    },
    {
        desc: '辛金：温润，秀气；重感情而性不坚，爱面子，有虚荣心；有气质，缺乏魄力。',
        moreLink: '',
    },
    {
        desc: '壬水：乐观，外向，热情，善于把握时机，允文允武，虽聪明却纵任性。多军事家、语言家、说客。',
        moreLink: '',
    },
    {
        desc: '癸水：平静，和缓，柔情善感，好幻想，重情调，注重原则，不很实际，遇逆境也不馁，有坚忍的耐心。多文学家、智者、谋士。',
        moreLink: '',
    },
    {
        desc: '可参阅张耀文《四柱推命十干秘解》。',
        moreLink: '',
    },
];

onMounted(() => {

})

function jumpUrl(url) {
    if (url) {
        window.location.href = url;
    }
}
</script>

<style lang="scss" scoped>
.text-container {
    padding: .5rem;
}

.item-row {
    display: flex;
    flex-direction: row;
    margin-top: .5rem;
}

.item-title {
    font-size: .8rem;
    font-weight: bold;
}

.item-content {
    font-size: .8rem;
}

.more-text {
    color: #0080FF;
}
</style>